<template>
  <div class="left">
    <el-menu :default-active="'/personal/info'" class="el-menu-vertical-demo" :router="true">
      <el-menu-item index="/personal/info">
        <el-icon>
          <Menu />
        </el-icon>
        <span>个人信息</span>
      </el-menu-item>
      <el-menu-item index="/personal/leave">
        <el-icon>
          <setting />
        </el-icon>
        <span>我的请假</span>
      </el-menu-item>
      <el-menu-item index="/personal/errorQuestion">
        <el-icon>
          <setting />
        </el-icon>
        <span>错题本</span>
      </el-menu-item>
      <el-menu-item index="/personal/employmentInfo">
        <el-icon>
          <setting />
        </el-icon>
        <span>我的就业</span>
      </el-menu-item>
      <el-menu-item index="/personal/questionsComments">
        <el-icon>
          <setting />
        </el-icon>
        <span>我的评论</span>
      </el-menu-item>
    </el-menu>
  </div>
  <div class="right">
    <router-view />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const route = useRoute()
const router = useRouter()

onMounted(() => {
  if (route.path != '/personal/info') {
    router.push('/personal/info')
  }
})

</script>

<style scoped>
.left {
  width: 300px;
  border-right: 1px solid #BBBBBB;
  box-sizing: border-box;
  padding-top: 50px;
  padding-left: 50px;
}

.right {
  width: 100%;
  padding: 10px;
  background-color: #f6f8fb;

}
</style>